{% extends 'layout.html' %}
 {% block title %}
    注册页面
{% endblock %}
{% block css %}
<style>
    .container{
        width: 600px;
        padding: 40px 80px;
        margin: 20px auto;
        border: 1px solid #ccc;
        box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
        border-radius: 20px;
    }
    .code{
        display: flex;
    }
    .code .in{
        margin-right: 5px;
    }
    .err-msg{
        color: red;
        position: absolute;
    }
</style>
{% endblock %}
{% block content %}
    <h2 style="text-align: center">注册用户</h2>
    <div class="container">
     <form novalidate id="form" >
         {% csrf_token %}
          {% for item in form %}
              {% if item.name == 'code' %}
                  <div class="form-group">
                    <label for="{{ item.id_for_label }}">{{ item.label }}</label>
                    <div  class="code">
                        <div class="in">
                            {{ item }}
                            <span class="err-msg"></span>
                        </div>
                        <input type="button" class="btn btn-default" value="点击获取验证码" id="code_id">
                    </div>

                  </div>
              {% else %}
                 <div class="form-group">
                    <label for="{{ item.id_for_label }}">{{ item.label }}</label>
    {#                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">#}
                        {{ item }}
                      <span class="err-msg"></span>
                 </div>
              {% endif %}

          {% endfor %}
         <button class="btn btn-primary" id="mysub">注册</button>
{#          <div style="display: flex;justify-content: center">#}
{#             #}
{#          </div>#}
        </form>
    </div>
{% endblock %}
{% block js %}
<script>
    // 发送手机验证码
    function sendSms(){
        const btn=document.querySelector('#code_id')
        btn.addEventListener('click',async ()=>{
            // let phone_input=document.querySelector('#id_mobile_phone').value.trim()
            //获取手机号 &&校验手机号
            let phone_input=document.querySelector('#id_mobile_phone').value
            // let phone_input=document.querySelector('#id_mobile_phone').value
            if(!phone_input.match(/^1[1-9]\d{9}$/)) return alert('手机号格式错误!')
            //向后台发送数据
            const res=await  http({
                method:'get',
                url:'{% url "web:send_sms"%}',
                params:{'mobile_phone':phone_input,'type':'register'}
            })
            //验证后台是否发送成功
            if(res.code==200){
                // console.log(res.data)
                // 禁用按钮  提示按钮文字
                btn.setAttribute('disabled',true)
                let s=5
                let timer=setInterval(()=>{
                   if(s>1){
                        btn.value=`${s}秒后发送短信`
                        s--
                   }else{

                       btn.removeAttribute('disabled')
                       btn.value=`点击获取验证码`
                       clearInterval(timer)
                   }
                },1000)
            }else{
                //后台错误
                // console.log(res.error)
                // alert('发送短信失败!')
               let timer=null
               for(let item in res.error){
                   clearTimeout(timer)
                   let doc=document.querySelector(`#id_${item}`)
                   doc.nextElementSibling.innerText=res.error[item][0]
                   timer=setTimeout(() => {
                       doc.nextElementSibling.innerText=''
                   },1000)

               }
            }
        })
    }
    sendSms()
    //点击注册按钮
    function bindSubit(){
        let submit=document.querySelector('#mysub')
        submit.addEventListener('click',async (e)=>{
            //阻止默认事件
            e.preventDefault()
            let form =document.querySelector('#form')
            let formData=new FormData(form)

            // const res=await http({
            //     method:'post',
            //     url:'{% url "web:register"%}',
            //     data: formData,
            // })
            const res=await  fetch('{% url "web:register"%}',{method :'post',body:formData})
            const data=await res.json()
            // console.log(data)
            if(data.code==200){
                location.href=data.data
            }else{
               let timer
               for(let item in data.error){
                   clearTimeout(timer)
                   let doc=document.querySelector(`#id_${item}`)
                   doc.nextElementSibling.innerText=data.error[item][0]

                   timer=setTimeout(() => {
                       doc.nextElementSibling.innerText=''
                   },1000)

               }
            }
        })
    }
    bindSubit()
</script>
{% endblock %}